@import '../../scss/styles.scss';

@layer payload-default {
  a.btn {
    display: inline-block;
  }

  .btn--withPopup {
    margin-block: 24px;
    .btn {
      margin: 0;
    }
  }

  .btn {
    * {
      pointer-events: none;
    }

    // colors
    &--style-primary {
      --color: var(--theme-elevation-0);
      --bg-color: var(--theme-elevation-800);
      --box-shadow: none;
      --hover-bg: var(--theme-elevation-600);
      --hover-color: var(--color);

      &.btn--disabled {
        --bg-color: var(--theme-elevation-200);
        --color: var(--theme-elevation-800);
        --hover-bg: var(--bg-color);
        --hover-color: var(--color);
      }
    }

    &--style-secondary {
      --color: var(--theme-text);
      --bg-color: transparent;
      --box-shadow: inset 0 0 0 1px var(--theme-elevation-800);
      --hover-color: var(--theme-elevation-600);
      --hover-box-shadow: inset 0 0 0 1px var(--theme-elevation-400);

      &.btn--disabled {
        --color: var(--theme-elevation-200);
        --box-shadow: inset 0 0 0 1px var(--theme-elevation-200);
        --hover-box-shadow: inset 0 0 0 1px var(--theme-elevation-200);
        --hover-color: var(--color);
      }
    }

    &--style-pill {
      --bg-color: var(--theme-elevation-150);
      --color: var(--theme-elevation-800);
      --hover-color: var(--color);
      --hover-bg: var(--theme-elevation-100);

      &.btn--disabled {
        --color: var(--theme-elevation-600);
        --hover-bg: var(--bg-color);
        --hover-color: var(--color);
      }
    }
  }

  .btn--withPopup {
    .popup-button {
      color: var(--color, inherit);
      background-color: var(--bg-color);
      box-shadow: var(--box-shadow);
      border-radius: $style-radius-m;
      align-items: center;

      html:not([dir='RTL']) & {
        border-left: 1px solid var(--theme-bg);
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
      }

      html[dir='RTL'] & {
        border-right: 1px solid var(--theme-bg);
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
      }

      &:hover,
      &:focus-visible,
      &:focus,
      &:active {
        background-color: var(--hover-bg);
        color: var(--hover-color);
        box-shadow: var(--hover-box-shadow);
      }
    }
  }

  .btn,
  .btn--withPopup .btn {
    &:hover,
    &:focus-visible,
    &:focus,
    &:active {
      color: var(--hover-color);
      box-shadow: var(--hover-box-shadow);
      background-color: var(--hover-bg);
    }
  }

  .btn--disabled,
  .btn--disabled .btn {
    cursor: not-allowed;
  }

  .btn {
    border-radius: $style-radius-s;
    font-size: var(--base-body-size);
    margin-block: base(1.2);
    line-height: base(1.2);
    border: 0;
    cursor: pointer;
    font-weight: normal;
    text-decoration: none;
    transition-property: border, color, box-shadow, background;
    transition-duration: 100ms;
    transition-timing-function: cubic-bezier(0, 0.2, 0.2, 1);

    color: var(--color, inherit);
    background-color: var(--bg-color, transparent);
    box-shadow: var(--box-shadow, none);

    .icon {
      @include color-svg(var(--color, currentColor));
      width: 100%;
      height: 100%;
    }

    &__content {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    &__icon {
      width: base(1.2);
      height: base(1.2);
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid;
      border-radius: 100%;
      padding: base(0.1);
      color: inherit;

      .icon {
        width: 100%;
        height: 100%;
      }

      &.btn--size-small {
        padding: base(0.2);
      }
    }

    &--withPopup {
      display: flex;
    }

    &--has-tooltip {
      position: relative;
    }

    &--icon-style-without-border {
      .btn__icon {
        border: none;
      }
    }

    &--icon-style-none {
      .btn__icon {
        border: none;
      }
    }

    &--size-small {
      padding: 0 base(0.4);

      &.btn--icon-position-left {
        padding-inline-start: base(0.1);
        padding-inline-end: base(0.4);

        .btn__content {
          flex-direction: row-reverse;
        }
      }

      &.btn--icon-position-right {
        padding-inline-start: base(0.4);
        padding-inline-end: base(0.1);
      }
    }

    &--size-medium {
      padding: base(0.2) base(0.6);

      &.btn--icon-position-left {
        padding-inline-start: base(0.4);
        padding-inline-end: base(0.6);

        .btn__content {
          gap: base(0.2);
          flex-direction: row-reverse;
        }
      }

      &.btn--icon-position-right {
        padding-inline-start: base(0.6);
        padding-inline-end: base(0.4);

        .btn__content {
          gap: base(0.2);
        }
      }
    }

    &--size-large {
      padding: base(0.4) base(0.8);

      &.btn--icon-position-left {
        padding-inline-start: base(0.6);
        padding-inline-end: base(0.8);

        .btn__content {
          gap: base(0.4);
          flex-direction: row-reverse;
        }
      }

      &.btn--icon-position-right {
        padding-inline-start: base(0.8);
        padding-inline-end: base(0.6);

        .btn__content {
          gap: base(0.4);
        }
      }
    }

    &--withPopup .btn {
      html:not([dir='RTL']) & {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
      }

      html[dir='RTL'] & {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
      }
    }

    &--style-icon-label,
    &--style-icon-label.btn--icon-position-left,
    &--style-icon-label.btn--icon-position-right {
      padding: 0;
      font-weight: 600;

      .btn__content {
        gap: base(0.4);
      }
    }

    &--style-none {
      padding: 0;
    }

    &:focus:not(:focus-visible) {
      .btn__icon {
        @include color-svg(var(--theme-elevation-800));
        background: var(--theme-elevation-150);
      }

      outline: none;
    }

    &:active {
      .btn__icon {
        @include color-svg(var(--theme-elevation-0));
        background: var(--theme-elevation-700);
      }
    }

    &:focus-visible {
      outline: var(--accessibility-outline);
      outline-offset: var(--accessibility-outline-offset);
    }

    &.btn--disabled {
      cursor: not-allowed;
    }
  }
}
